<template>
  <div class="login">
    <!-- <img :src="imgSrc" width="100%" height="100%" alt="" /> -->
    <div class="loginPart">
      <h2><span style="color:red;margin-right:10px;font-size: 26px;font-weight: bolder;">{{ isEmployee ? '住户' : '管理员'
      }}</span>登录</h2>
      <el-form :model="employee" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div class="inputElement">
          <el-form-item :label="isEmployee ? '用户名' : '账户名'" prop="username" id="names">
            <el-input v-model="employee.username" clearable="true"></el-input>
          </el-form-item>
        </div>
        <div class="inputElement">
          <el-form-item label="密码" prop="password" id="names">
            <el-input type="password" show-password v-model="employee.password"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item class="btn">
            <el-button type="primary" @click="login()" class="loginbtn">登录</el-button>
            <span></span>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </div>
        <div style="text-align: right;color: white;" @click="changeRule">
          <el-link type="warning"><span>{{ isEmployee ? '管理员' : '住户' }}</span>登录</el-link>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import router from '@/router'


export default {
  data () {
    return {
      employee: {
        username: "",
        password: "",
      },
      // role 为1表示员工，role为0表示管理员
      role: 1,
      isEmployee: true,
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
    }
  },
  methods: {
    // 点击切换登录身份
    changeRule () {
      this.isEmployee = this.isEmployee ? false : true
      this.role = this.isEmployee ? 1 : 0
      this.employee = {}
    },
    resetForm () {
      this.employee = {}
    },
    login () {
      // role为0表示管理员
      if (this.role === 0) {
        this.$http({
          method: 'post',
          url: '/administrator/login',
          headers: {
            'Content-Type': 'application/json'
          },
          data: JSON.stringify(this.employee)
        }).then(res => {
          if (res.data.code === 200) {
            const data = res.data.data.admin
            sessionStorage.setItem('username', data.username)
            sessionStorage.setItem('password', data.password)
            sessionStorage.setItem('authority', data.authority)
            sessionStorage.setItem('personName', '管理员')
            this.$router.push('/index')
          } else {
            this.$message({
              type: 'error',
              message: '登录失败,请检查账户名密码'
            })
            return
          }

        })
      }
      // role为1表示用户登录
      else {
        this.$http({
          method: 'POST',
          url: 'person/login',
          headers: {
            'Content-Type': 'application/json'
          },
          data: JSON.stringify(this.employee)

        }).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            const data = res.data.data.person
            sessionStorage.setItem('username', data.username)
            sessionStorage.setItem('password', data.password)
            sessionStorage.setItem('personName', data.personName)
            sessionStorage.setItem('authority', -1)
            this.$router.push('/index')
          } else {
            this.$message({
              type: 'error',
              message: '登录失败,请检查用户名密码'
            })
            return
          }

        })
      }
    }
  },
}
</script>
<style scoped>
.login {
  width: 100%;
  height: 100%;
  background: url('../assets/img/loginBackground.jpg') no-repeat;
  background-size: cover;
  overflow: hidden;
}



.loginPart {
  position: absolute;
  /*定位方式绝对定位absolute*/
  top: 50%;
  left: 50%;
  /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
  transform: translate(-50%, -50%);
  /*实现块元素百分比下居中*/
  width: 520px;
  padding: 50px;
  padding-left: 0;
  background: rgba(0, 0, 0, .9);
  /*背景颜色为黑色，透明度为0.8*/
  box-sizing: border-box;
  /*box-sizing设置盒子模型的解析模式为怪异盒模型，
    将border和padding划归到width范围内*/
  box-shadow: 0px 15px 25px rgba(205, 201, 201, 0.5);
  /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
  border-radius: 15px;
  /*边框圆角，四个角均为15px*/
}



.loginPart h2 {
  margin-left: 40px;
  margin-bottom: 30px;
  color: #fff;
  text-align: center;
  /*文字居中*/
}

.loginPart .inputbox {
  position: relative;
}

.loginPart .inputElement input {
  width: 100%;
  padding: 10px 0;
  font-size: 22px;
  color: #fff;
  letter-spacing: 1px;
  /*字符间的间距1px*/
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  /*outline用于绘制元素周围的线
    outline：none在这里用途是将输入框的边框的线条使其消失*/
  background: transparent;
  /*背景颜色为透明*/
}

.demo-ruleForm {
  margin-left: 20px;
}

.loginbtn {
  margin: 0 60px;
}
</style>
